import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { getPageFlag, getFileBlob, downloadBlod, getPostData, getFlagValue } from 'services/utils'
import QueryTable from '../components/query-table'
import { Button, Icon, Dropdown, Menu } from 'antd'
import { connect } from 'react-redux'

const accessFlag = getPageFlag('/proto-role/user-log', 'access')
const exportFlag = getPageFlag('/proto-role/user-log', 'export')
const MenuItem = Menu.Item

@connect(
  state => ({
    auth                : state.Passport.auth,
    postData            : state.Proto.postData,
  }),
)
export default class UserLog extends PureComponent {

  render () {
    const { location, postData, auth } = this.props
    const { PostOptions, BodyData } = getPostData(postData, 'user-log')
    let options = {
      layoutOptions: {
        location,
        pageCode: accessFlag.value,
        breadcrumb: [
          { name: '主页', link: '/' },
          { name: '玩家信息类' },
          { name: '货币记录' }
        ],
      },
      searchOptions: {
        begin_end: {
          format: 'YYYY-MM-DD',
          required: { required: true, message: `请选择时间点!` }
        },
        roleId: {
          name: '玩家ID',
          required: { required: true, message: `玩家ID不能为空!` }
        }
      },
      proto: 'user-log',
      tableColumns: [
        {
          key: '1',
          title: '日期',
          dataIndex: 'data_0',
          width: 200
        },
        {
          key: '2',
          title: '变更数量',
          dataIndex: 'data_1'
        },
        {
          key: '3',
          title: '来源',
          dataIndex: 'data_2',
          width: 150
        },
        {
          key: '4',
          title: '关联',
          dataIndex: 'data_3',
          width: 150
        }
      ],
      tableScroll: { },
      tablePagination: true,
      tools: [
        <Dropdown overlay={(
            <Menu onClick={this.handleClickExport}>
              <MenuItem key="csv">csv文件</MenuItem>
            </Menu>
          )}
          disabled={!BodyData || getFlagValue(auth, exportFlag.value, null)}
          >
          <Button style={{ marginLeft: 8 }} >
            导出数据 <Icon type="down" />
          </Button>
        </Dropdown>,
        <a id="download-blob-file"></a>
      ],
      refresh: true,
      remark: [
        '1.新手场捕鱼消耗/产出的金币',
        '2.中手场捕鱼消耗/产出的金币',
        '3.高级场捕鱼消耗/产出的金币',
        '4.VIP级场捕鱼消耗/产出的金币',
        '5.VIP每日登录补充金币',
        '6.新手注册（起航礼包）',
        '7.新手任务奖励，关联任务ID',
        '8.七日签到',
        '9.每日转盘签到',
        '10.VIP转盘签到',
        '11.月卡领取',
        '12.破产救济金',
        '13.邮件领取（赠送，系统发放，后台添加；关联ID）',
        '14.商城充值',
        '15.商城道具购买',
        '16.游戏内抽奖',
        '17.炮台升级奖励',
        '18.核弹的使用',
        '19.弹头的使用',
        '20.兑换商城',
        '21.人物升级奖励',
        '22.道具购买',
        '23.核弹的购买',
        '24.神秘商店兑换',
        '25.鱼掉落物品类型数量',
        '26.绑定账号奖励',
        '27.活动转盘'
      ]
    }
    return (
      <QueryTable  {...options} />
    )
  }

  handleClickExport = ({ key }) => {
    const { postData } = this.props
    const { PostOptions, BodyData} = getPostData(postData, 'user-log')
    if (!BodyData) return
    if (key === 'csv') {
      let blodString = `\uFEFF日期,变更数量,来源,关联\r\n`
      for (let lineData of BodyData) {
        let lineInfo = filterLineData(lineData.split(';'))
        blodString += lineInfo
        blodString += '\r\n'
      }
      let fileBlob = getFileBlob(blodString, { type: 'text/cvs', encoding: 'utf-8' })
      downloadBlod(fileBlob, `user-log.csv`)
    }
  }
}

const filterLineData = lineData => {
  let arr = []
  for (let e of lineData) {
    let info = e
    if (/\"/.test(e)) {
      info = info.replace(/\"/g, '\"\"')
    }
    arr.push(`"${info}\t"`)
  }
  return _.join(arr, ',')
}